<!-- 合同分类 -->
<template>
    <div class="empty-page">
        <!-- 装饰背景 -->
        <div class="bg-decoration"></div>

        <!-- 主容器 -->
        <div class="content-wrapper">
            <!-- 提示图标 -->
            <div class="empty-icon">
                <el-icon :size="120" class="icon-pulse">
                    <Clock />
                </el-icon>
            </div>

            <!-- 文字内容 -->
            <div class="text-container">
                <h2 class="title">功能暂未开发</h2>
                <p class="desc">该功能正在快马加鞭开发中，敬请期待上线通知</p>
            </div>

            <!-- 操作按钮 -->
            <div class="action-buttons">
                <el-button type="primary" size="default" @click="handleBack" class="back-btn">
                    <ArrowLeft class="mr-2" /> 返回上一页
                </el-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { Clock, ArrowLeft } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';

// 返回逻辑
const router = useRouter();
const handleBack = () => {
    if (window.history.length > 1) {
        router.back();
    } else {
        router.push('/');
    }
};
</script>
<style scoped>
.empty-page {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    background-color: #fafafa;
    overflow: hidden;
    box-sizing: border-box;
    margin: 0;
}

.content-wrapper {
    position: relative;
    z-index: 1;
    max-width: 600px;
    width: 100%;
    padding: 40px 20px;
    border-radius: 16px;
    background-color: #fff;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
    box-sizing: border-box;
}

/* 装饰背景：保持原样 */
.bg-decoration {
    position: absolute;
    width: 100%;
}

/* 图标样式：保持原样 */
.empty-icon {
    color: #409eff;
    margin-bottom: 32px;
    position: relative;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 图标呼吸动画：保持原样 */
.icon-pulse {
    animation: pulse 3s infinite ease-in-out;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

/* 文字样式：保持原样 */
.text-container {
    margin-bottom: 32px;
}

.title {
    font-size: 28px;
    color: #1d2129;
    margin: 0 0 16px 0;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.desc {
    font-size: 16px;
    color: #86909c;
    margin: 0;
    line-height: 1.8;
    max-width: 400px;
    margin: 0 auto;
}

/* 按钮样式：保持原样 */
.action-buttons {
    margin-top: 16px;
    height: 44px;
}

.back-btn {
    padding: 10px 28px;
    font-size: 15px;
    border-radius: 8px;
    transition: all 0.3s ease;
    background-color: #409eff;
    border-color: #409eff;
}


.back-btn:active {
    transform: translateY(0);
}

/* 响应式调整：进一步优化小屏幕高度 */
@media (max-width: 768px) {
    .content-wrapper {
        padding: 30px 15px;
        margin: 0 15px;
        max-height: 75vh;
        /* 小屏幕降低最大高度，避免溢出 */
    }

    .empty-icon {
        height: 100px;
        /* 小屏幕缩小图标高度 */
        margin-bottom: 24px;
    }
}

/* 针对超小屏幕（如手机横屏）的特殊处理 */
@media (max-height: 480px) {
    .content-wrapper {
        padding: 20px 15px;
        max-height: 70vh;
    }

    .empty-icon {
        height: 80px;
        margin-bottom: 16px;
    }

    .text-container {
        margin-bottom: 16px;
    }
}
</style>